<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消灭病毒</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="stage">


            <!-- 游戏元素,动态元素，会频繁发生变化的元素 -->
            <div id="game"></div> 
            
            <!-- ui层，开始页面，失败界面，分数统计 -->
            <div id="ui">

                <!-- 显示分数 -->
                <div class="score-ui">
                    <img src="./imgs/vir.png" alt="">
                    <span id="score-label">0</span>
                </div>


                <!-- 开始页面 -->
                <div id="start-alert">
                    <div class="game-desc">
                        <img class="logo" src="./imgs/logo.png" alt="">
                        <p>屏幕上方有带字母的“病毒”落下，按下键盘对应的按键，消灭病毒，否则，你将被“病毒”消灭😈</p>
                    </div>
                    <footer>
                        <div id="start-btn">点击屏幕开始游戏</div>
                        <p> Created By Davie </p>
                    </footer>
                </div>


                <!-- 游戏失败界面 -->
                <div id="game-over-alert">
                    <h1>任务失败</h1>
                    <div id="restart-btn">重 玩</div>
                </div>
                <!-- 下一关界面 -->
                <div id="game-next-alert">
                    <h1>已通关</h1>
                    <div id="next-btn">下一关</div>
                </div>

            </div>

    </div>

    <audio src="./imgs/xm2.mp3" id="xm"></audio>

    <script src="./index.js"></script>    
</body>
</html>